import { useEffect } from 'react';
import { TargetIcon, TestTubeIcon, ShieldIcon, ClockIcon, ArrowRightIcon, UsersIcon } from 'lucide-react';
import ImageLoader from '../components/UI/ImageLoader';

const About = () => {
  useEffect(() => {
    document.title = 'About | TronoraHub';
  }, []);

  return <div className="w-full bg-[#0d0d10] pt-24 pb-16">
      <div className="container mx-auto px-4">
        <div className="max-w-4xl mx-auto">
          {/* Hero Section */}
          <div className="text-center mb-16">
            <h1 className="text-3xl md:text-4xl font-bold font-display mb-6 gradient-text">
              About TronoraHub
            </h1>
            <p className="text-xl text-[#8a8f98] max-w-2xl mx-auto">
              Decoding the next aura of technology with rigorous testing, 
              unbiased reviews, and expert insights for discerning tech enthusiasts.
            </p>
          </div>

          {/* Hero Image */}
          <div className="relative h-[40vh] rounded-lg overflow-hidden mb-16">
            <ImageLoader 
              src="https://images.unsplash.com/photo-1581090464777-f3220bbe1b8b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" 
              alt="TronoraHub Lab" 
              className="w-full h-full" 
            />
            <div className="absolute inset-0 bg-gradient-to-t from-[#0d0d10] via-transparent to-transparent"></div>
            <div className="absolute bottom-0 left-0 right-0 p-8">
              <div className="flex items-center justify-center">
                <div className="bg-black/50 backdrop-blur-sm px-6 py-3 rounded-full">
                  <p className="text-xl font-medium text-white">
                    State-of-the-art testing laboratory
                  </p>
                </div>
              </div>
            </div>
          </div>

          {/* Mission Section */}
          <div className="card p-8 mb-12">
            <div className="flex items-center mb-6">
              <div className="w-12 h-12 bg-[#4361ee]/10 rounded-lg flex items-center justify-center mr-4">
                <TargetIcon className="w-6 h-6 text-[#4361ee]" />
              </div>
              <h2 className="text-2xl font-bold font-display">Our Mission</h2>
            </div>
            <div className="grid md:grid-cols-2 gap-8">
              <div>
                <p className="text-[#8a8f98] leading-relaxed mb-4">
                  TronoraHub was founded with a clear mission: to provide discerning
                  tech enthusiasts with in-depth, unbiased, and technically precise
                  reviews and insights. In a world where technology evolves at a
                  breathtaking pace, we believe that informed decisions require
                  thorough analysis, rigorous testing, and clear communication.
                </p>
              </div>
              <div>
                <p className="text-[#8a8f98] leading-relaxed">
                  We aim to decode the complex world of technology, cutting through
                  marketing hype to reveal the true capabilities and limitations of
                  the products we review. Our approach combines technical expertise
                  with real-world usage scenarios to give you a complete
                  understanding of how technology will perform in your life.
                </p>
              </div>
            </div>
          </div>

          {/* Testing Methodology */}
          <div className="card p-8 mb-12">
            <div className="flex items-center mb-6">
              <div className="w-12 h-12 bg-[#06d6a0]/10 rounded-lg flex items-center justify-center mr-4">
                <TestTubeIcon className="w-6 h-6 text-[#06d6a0]" />
              </div>
              <h2 className="text-2xl font-bold font-display">Our Testing Methodology</h2>
            </div>
            <p className="text-[#8a8f98] leading-relaxed mb-8">
              At the heart of TronoraHub is our state-of-the-art testing lab,
              where we subject products to a comprehensive suite of benchmarks
              and real-world tests. We believe that numbers tell only part of
              the story, which is why our testing combines quantitative data
              with qualitative assessment.
            </p>
            
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
              <div className="relative h-60 rounded-lg overflow-hidden group">
                <ImageLoader 
                  src="https://images.unsplash.com/photo-1588508065123-287b28e013da?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" 
                  alt="Audio testing equipment" 
                  className="w-full h-full transition-transform group-hover:scale-105" 
                />
                <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
                <div className="absolute bottom-4 left-4 right-4">
                  <h3 className="text-white font-semibold mb-1">Audio Testing Lab</h3>
                  <p className="text-gray-300 text-sm">Professional-grade equipment for precise measurements</p>
                </div>
              </div>
              <div className="relative h-60 rounded-lg overflow-hidden group">
                <ImageLoader 
                  src="https://images.unsplash.com/photo-1550745165-9bc0b252726f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" 
                  alt="Computer benchmarking" 
                  className="w-full h-full transition-transform group-hover:scale-105" 
                />
                <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
                <div className="absolute bottom-4 left-4 right-4">
                  <h3 className="text-white font-semibold mb-1">Performance Lab</h3>
                  <p className="text-gray-300 text-sm">Comprehensive benchmarking and stress testing</p>
                </div>
              </div>
            </div>
            
            <div className="bg-[#151518] p-6 rounded-lg">
              <p className="text-[#8a8f98] leading-relaxed">
                Each product category has its own specialized testing protocols,
                developed by our team of experts to evaluate the factors that
                matter most to users. From color accuracy measurements for
                displays to thermal performance under sustained load for
                processors, we leave no stone unturned in our quest for technical
                truth.
              </p>
            </div>
          </div>

          {/* Core Values Grid */}
          <div className="grid md:grid-cols-2 gap-8 mb-12">
            {/* Editorial Independence */}
            <div className="card p-8">
              <div className="flex items-center mb-4">
                <div className="w-10 h-10 bg-[#4361ee]/10 rounded-lg flex items-center justify-center mr-4">
                  <ShieldIcon className="w-5 h-5 text-[#4361ee]" />
                </div>
                <h3 className="text-xl font-bold font-display">Editorial Independence</h3>
              </div>
              <p className="text-[#8a8f98] leading-relaxed mb-4">
                TronoraHub maintains strict editorial independence. While we do
                use affiliate links and occasionally receive review units from
                manufacturers, our opinions are never for sale.
              </p>
              <p className="text-[#8a8f98] leading-relaxed">
                Our review scores reflect a product's performance relative to its
                competitors, its value proposition, and how well it fulfills its
                intended purpose. We're not afraid to be critical when warranted,
                nor to praise excellence when we find it.
              </p>
            </div>

            {/* Our History */}
            <div className="card p-8">
              <div className="flex items-center mb-4">
                <div className="w-10 h-10 bg-[#06d6a0]/10 rounded-lg flex items-center justify-center mr-4">
                  <ClockIcon className="w-5 h-5 text-[#06d6a0]" />
                </div>
                <h3 className="text-xl font-bold font-display">Our History</h3>
              </div>
              <p className="text-[#8a8f98] leading-relaxed mb-4">
                Founded in 2020 by a group of tech journalists and industry
                veterans, TronoraHub began as a response to the growing complexity
                of consumer technology and the need for more technically rigorous
                coverage.
              </p>
              <p className="text-[#8a8f98] leading-relaxed">
                What started as a small blog has grown into a comprehensive tech
                review platform with a dedicated following of enthusiasts,
                professionals, and curious consumers.
              </p>
            </div>
          </div>

          {/* Looking Forward */}
          <div className="card p-8 bg-gradient-to-r from-[#4361ee]/5 to-[#06d6a0]/5 border border-[#4361ee]/20">
            <div className="flex items-center mb-6">
              <div className="w-12 h-12 bg-[#4361ee]/10 rounded-lg flex items-center justify-center mr-4">
                <ArrowRightIcon className="w-6 h-6 text-[#4361ee]" />
              </div>
              <h2 className="text-2xl font-bold font-display">Looking Forward</h2>
            </div>
            <p className="text-[#8a8f98] leading-relaxed text-lg">
              As technology continues to advance and integrate more deeply into
              our lives, TronoraHub remains committed to providing the insights
              you need to navigate this rapidly changing landscape. From
              emerging technologies like artificial intelligence and extended
              reality to the evolution of established categories like
              smartphones and computers, we'll be here to decode the next aura
              of technology.
            </p>
          </div>

          {/* Call to Action */}
          <div className="text-center mt-12">
            <div className="inline-flex items-center justify-center w-16 h-16 bg-[#06d6a0]/10 rounded-full mb-4">
              <UsersIcon className="w-8 h-8 text-[#06d6a0]" />
            </div>
            <h3 className="text-xl font-bold font-display mb-2">Join Our Community</h3>
            <p className="text-[#8a8f98] mb-6">
              Stay updated with the latest tech insights and be part of our growing community.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <a href="/contact" className="btn bg-[#4361ee] hover:bg-[#4361ee]/80 text-white px-6 py-3 rounded-lg font-medium transition-colors">
                Get in Touch
              </a>
              <a href="/team" className="btn border border-[#4361ee] text-[#4361ee] hover:bg-[#4361ee] hover:text-white px-6 py-3 rounded-lg font-medium transition-colors">
                Meet the Team
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>;
};

export default About;